<!DOCTYPE html>
<html>
<head>
    <style>
        h5 {
            margin: 0;
        }

        div {
            font-family: monospace;
        }

        .container {
            position: relative;
            left: 150px;
            font-size: 0.8em;
        }

        .main {
            width: 400px;
        }

        .relative {
            position: relative;
        }

        .fixed {
            position: fixed;
        }

        .green {
            background-color: lime;
        }

        .blue {
            background-color: cyan;
        }

        .grey {
            background-color: silver;
        }

        .rtl {
            direction: rtl;
        }

        .inline {
            display: inline-block;
            position: relative;
        }
    </style>
</head>
<body>
    <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/detail?id=31286">31286</a>. css rendering bug : fixed-position-element and 'left'.</h3>
    <p>If fixed position inline element does not have left and/or right position then it should render as normal flow.</p>

    <h5>Case 1: fixed text box (blue) should be just after relative text box (green).</h5>
    <div class="container">
        <div class="main relative green" style="left: 100px;">
            relative<div class="inline blue">fixed</div>
        </div>
    </div>

    <h5>Case 2: fixed text box (blue) should be just before relative text box (green).</h5>
    <div class="container">
        <div class="main relative green rtl" style="left: 100px;">
            relative<div class="inline blue">fixed</div>
        </div>
    </div>

    <h5>Case 3: fixed text box (blue) should be just after relative text box (green).</h5>
    <div class="container">
        <div class="main relative green" style="right: 100px;">
            relative<div class="inline blue">fixed</div>
        </div>
    </div>

    <h5>Case 4: fixed text box (blue) should be just before relative text box (green).</h5>
    <div class="container">
        <div class="main relative green rtl" style="right: 100px;">
            relative<div class="inline blue">fixed</div>
        </div>
    </div>

    <h5>Case 5: fixed text box (blue) should be just after relative2 text box (green).</h5>
    <div class="container">
        <div class="main relative grey" style="left: 100px;">
            relative
            <span class="relative green" style="left: 100px;">
                relative2<div class="inline blue">fixed</div>
            </span>
        </div>
    </div>

    <h5>Case 6: fixed text box (blue) should be after relative text box (grey) in some distance and before the other relative2 text box (green) in some distance.</h5>
    <div class="container">
        <div class="main relative grey rtl" style="left: 100px;">
            relative
            <span class="relative green" style="left: 100px;">
                relative2<div class="inline blue">fixed</div>
            </span>
        </div>
    </div>

    <h5>Case 7: fixed text box (blue) should be just after relative2 text box (green).</h5>
    <div class="container">
        <div class="main relative grey" style="left: 100px;">
            relative
            <span class="relative green" style="right: 100px;">
                relative2<div class="inline blue">fixed</div>
            </span>
        </div>
    </div>

    <h5>Case 8: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
    <div class="container">
        <div class="main relative grey rtl" style="left: 100px;">
            relative
            <span class="relative green" style="right: 100px;">
                relative2<div class="inline blue">fixed</div>
            </span>
        </div>
    </div>

    <h5>Case 9: fixed text box (blue) should be just after relative2 text box (green).</h5>
    <div class="container">
        <div class="main relative grey" style="right: 100px;">
            relative
            <span class="relative green" style="left: 100px;">
                relative2<div class="inline blue">fixed</div>
            </span>
        </div>
    </div>

    <h5>Case 10: fixed text box (blue) should be after relative text box (grey) in some distance and before other relative2 text box (green) in some distance.</h5>
    <div class="container">
        <div class="main relative grey rtl" style="right: 100px;">
            relative
            <span class="relative green" style="left: 100px;">
                relative2<div class="inline blue">fixed</div>
            </span>
        </div>
    </div>

    <h5>Case 11: fixed text box (blue) should be just after relative2 text box (green).</h5>
    <div class="container">
        <div class="main relative grey" style="right: 100px;">
            relative
            <span class="relative green" style="right: 100px;">
                relative2<div class="inline blue">fixed</div>
            </span>
        </div>
    </div>

    <h5>Case 12: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
    <div class="container">
        <div class="main relative grey rtl" style="right: 100px;">
            relative
            <span class="relative green" style="right: 100px;">
                relative2<div class="inline blue">fixed</div>
            </span>
        </div>
    </div>

    <h5>Case 13: fixed text box (blue) should be just after relative2 text box (green).</h5>
    <div class="container">
        <div class="main relative grey" style="left: 100px;">
            relative
            <span class="relative green" style="left: 25%;">
                relative2<div class="inline blue">fixed</div>
            </span>
        </div>
    </div>

    <h5>Case 14: fixed text box (blue) should be after relative text box (grey) in some distance and before the other relative2 text box (green) in some distance.</h5>
    <div class="container">
        <div class="main relative grey rtl" style="left: 100px;">
            relative
            <span class="relative green" style="left: 25%;">
                relative2<div class="inline blue">fixed</div>
            </span>
        </div>
    </div>

</body>
</html>
